import {ref, computed} from 'vue'
import {NModal, NCard, NList, NListItem, NButton, NSpace, NTag, NEmpty, NTabs, NTabPane, NScrollbar} from 'naive-ui'
import {useXianLuStore} from '#imports'
import {ZhiwuDataType, zhiwuList} from '~/utils/zhiwilist'

export interface ZhongzhiModalProps {
    value: boolean;
    landId?: string;
    landLevel?: number;
    onConfirm?: (zhiwu: ZhiwuDataType) => void;
    onCancel?: () => void;
}

const SeedItem = defineNuxtComponent({
    name: "种子",
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        select: {
            type: Boolean,
            default: false
        },
    },
    setup(props,) {

        return () => <div
            class={["w-full flex items-center justify-between cursor-pointer border border-solid p-10px rounded", props.select ? "border-blue-400" : "border-white"].join(" ")}>
            <div class={"w-full flex flex-col"}>
                <div class={"font-semibold mb-10px"}>{props.data.name}</div>
                <div class={"text-sm"}>{props.data.description}</div>
                <div class={"flex gap-10px mt-10px"}>
                    <NTag type="info">等级: {props.data.level}</NTag>
                    <NTag
                        type="success">成熟时间: {((props.data.growTime.faya + props.data.growTime.shengzhang + props.data.growTime.kaihua + props.data.growTime.chengshu) / 60).toFixed(0)}分钟</NTag>
                </div>
            </div>
            <div class={"flex-shrink-0 flex-center w-40px"}>
                {props.select && <Icon name={"ant-design:check-outlined"} size={"30"} class={"text-blue-400"}/>}
            </div>
        </div>
    }
})


export default defineNuxtComponent({
    name: '种植弹窗',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        landId: {
            type: String,
            default: ''
        },
        landLevel: {
            type: Number,
            default: 1
        },
        onConfirm: {
            type: Function,
            default: null
        },
        onCancel: {
            type: Function,
            default: null
        }
    },
    setup(props, {emit}) {
        const store = useXianLuStore()
        const activeTab = ref('all')

        // 根据土地等级筛选可种植的植物
        const availableZhiwu = computed(() => {
            return zhiwuList.filter(zhiwu => zhiwu.level <= props.landLevel)
        })

        // 获取所有可用的植物等级
        const zhiwuLevels = computed(() => {
            const levels = new Set<number>()
            availableZhiwu.value.forEach(zhiwu => levels.add(zhiwu.level))
            return Array.from(levels).sort((a, b) => a - b) // 按等级从小到大排序
        })

        // 根据标签筛选植物
        const filteredZhiwu = computed(() => {
            if (activeTab.value === 'all') {
                return availableZhiwu.value
            } else {
                const level = parseInt(activeTab.value)
                return availableZhiwu.value.filter(zhiwu => zhiwu.level === level)
            }
        })

        // 选中的植物
        const selectedZhiwu = ref<any>(null)

        // 选择植物
        const selectZhiwu = (zhiwu: ZhiwuDataType) => {
            if (zhiwu.name === selectedZhiwu.value?.name) {
                selectedZhiwu.value = null
            } else {
                selectedZhiwu.value = zhiwu
            }
        }

        // 确认种植
        const confirmZhongzhi = () => {
            if (selectedZhiwu.value && props.onConfirm) {
                props.onConfirm(selectedZhiwu.value)
            }
            closeModal()
        }

        // 关闭弹窗
        const closeModal = () => {
            selectedZhiwu.value = null
            if (props.onCancel) {
                props.onCancel()
            }
            emit('update:value', false)
        }

        // 渲染植物列表
        const renderZhiwuList = (zhiwuList: Array<ZhiwuDataType>) => {
            return zhiwuList.length > 0 ? (
                <div class={"w-full grid gap-10px grid-cols-2"}>
                    {zhiwuList.map((zhiwu: any, index: number) => (
                        <SeedItem data={zhiwu} key={index} select={selectedZhiwu.value?.name === zhiwu.name}
                                  onClick={() => selectZhiwu(zhiwu)}/>
                    ))}
                </div>
            ) : (
                <NEmpty description="没有可种植的灵植"/>
            )
        }

        return () => (
            <NModal show={props.value} onUpdateShow={closeModal} width={"800px"}>
                <NCard title="选择要种植的灵植" style="width: 600px; max-width: 90vw;" bordered={false}>
                    <div style="max-height: 80vh; display: flex; flex-direction: column;">
                        <NTabs value={activeTab.value} onUpdateValue={(value) => activeTab.value = value}>
                            <NTabPane name="all" tab="全部">
                                <NScrollbar style="max-height: calc(80vh - 180px);">
                                    {renderZhiwuList(filteredZhiwu.value)}
                                </NScrollbar>
                            </NTabPane>

                            {zhiwuLevels.value.map(level => (
                                <NTabPane key={level} name={level.toString()} tab={`${level}级`}>
                                    <NScrollbar style="max-height: calc(80vh - 180px);">
                                        {renderZhiwuList(filteredZhiwu.value)}
                                    </NScrollbar>
                                </NTabPane>
                            ))}
                        </NTabs>

                        <NSpace justify="end" style="margin-top: 20px;">
                            <NButton onClick={closeModal}>取消</NButton>
                            <NButton
                                type="primary"
                                disabled={!selectedZhiwu.value}
                                onClick={confirmZhongzhi}
                            >
                                确认种植
                            </NButton>
                        </NSpace>
                    </div>
                </NCard>
            </NModal>
        )
    }
})